<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="shortcut icon" href="//cube.elemecdn.com/c/54/38fa90be5da041bbec3945fb82c00png.png">
    <link href="framework/reset.css" rel="stylesheet">
    <link href="framework/icon.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
    <script src="https://fastly.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="js/pageJump.js"></script>
    <title>饿了么 首页</title>
</head>

<body>
    <!-- 总容器 -->
    <div class="wrapper" id="app">
        <!-- header部分 -->
        <header>
            <div class="icon-location-box">
                <div class="icon-location"></div>
            </div>
            <div class="location-text">沈阳市规划大厦<i class="fa fa-caret-down"></i></div>
        </header>

        <!-- search部分 -->
        <!-- 
 搜索框部分（此块与search-fixed-top块宽度高度一致，用于当
 search-fixed-top块固定后，挡住下面块不要窜上去）
 -->
        <div class="search">
            <!-- 当滚动条超过上面的定位块时，search-fixed-top块变成固定在顶部。 -->
            <div class="search-fixed-top" id="fixedBox">
                <!-- 搜索框部分中间的白框 -->
                <div class="search-box">
                    <i class="fa fa-search"></i>搜索饿了么商家、商品名称
                </div>
            </div>
        </div>

        <!-- 滚动横幅公告 -->
        <template>
            <div>
                <div class="notice-box" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
                    <transition name="notice-slide">
                        <p class="notice-item" :key="noticeList.id">
                            {{ noticeList.text }}
                        </p>
                    </transition>
                </div>
            </div>
        </template>

        <!-- 点餐分类部分 -->
        <ul class="foodtype">
            <li onclick="location.href='businessList.html?type=1'">
                <img src="img/dcfl01.png">
                <p>美食</p>
            </li>
            <li onclick="location.href='businessList.html?type=2'">
                <img src="img/dcfl02.png">
                <p>早餐</p>
            </li>
            <li onclick="location.href='businessList.html?type=3'">
                <img src="img/dcfl03.png">
                <p>跑腿代购</p>
            </li>
            <li onclick="location.href='businessList.html?type=4'">
                <img src="img/dcfl04.png">
                <p>汉堡披萨</p>
            </li>
            <li onclick="location.href='businessList.html?type=5'">
                <img src="img/dcfl05.png">
                <p>甜品饮品</p>
            </li>
            <li onclick="location.href='businessList.html?type=6'">
                <img src="img/dcfl06.png">
                <p>速食简餐</p>
            </li>
            <li onclick="location.href='businessList.html?type=7'">
                <img src="img/dcfl07.png">
                <p>地方小吃</p>
            </li>
            <li onclick="location.href='businessList.html?type=8'">
                <img src="img/dcfl08.png">
                <p>米粉面馆</p>
            </li>
            <li onclick="location.href='businessList.html?type=9'">
                <img src="img/dcfl09.png">
                <p>包子粥铺</p>
            </li>
            <li onclick="location.href='businessList.html?type=10'">
                <img src="img/dcfl10.png">
                <p>炸鸡炸串</p>
            </li>
        </ul>

        <!-- 横幅广告部分 -->
        <div class="banner">
            <h3>品质套餐</h3>
            <p>搭配齐全吃得好</p>
            <a>立即抢购 &gt;</a>
        </div>

        <!-- 超级会员部分 -->
        <div class="supermember" v-if="!isVIP">
            <div class="left">
                <img src="img/super_member.png">
                <h3>超级会员</h3>
                <p>&#8226; 每单享超值权益</p>
            </div>
            <div class="right" onclick="location.href='supermember.html'"> <!-- 传参，是否VIP -->
                立即开通 &gt;
            </div>
        </div>

        <!-- 推荐商家部分 -->
        <div class="recommend">
            <div class="recommend-line"></div>
            <p>推荐商家</p>
            <div class="recommend-line"></div>
        </div>

        <!-- 推荐方式部分 -->
        <ul class="recommendtype">
            <li>综合排序<i class="fa fa-caret-down"></i></li>
            <li>距离最近</li>
            <li>销量最高</li>
            <li>筛选<i class="fa fa-filter"></i></li>
        </ul>

        <!-- 推荐商家列表部分 -->
        <ul class="business">
            <li>
                <img src="img/sj01.png">
                <div class="business-info">
                    <div class="business-info-h">
                        <h3>万家饺子（软件园E18店）</h3>
                        <div class="business-info-like">&#8226;</div>
                    </div>
                    <div class="business-info-star">
                        <div class="business-info-star-left">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <p>4.9 月售345单</p>
                        </div>
                        <div class="business-info-star-right">
                            蜂鸟专送
                        </div>
                    </div>
                    <div class="business-info-delivery">
                        <p>&#165;15起送 | &#165;3配送</p>
                        <p>3.22km | 30分钟</p>
                    </div>
                    <div class="business-info-explain">
                        <div>各种饺子</div>
                    </div>
                    <div class="business-info-promotion">
                        <div class="business-info-promotion-left">
                            <div class="business-info-promotion-left-incon">新</div>
                            <p>饿了么新用户首单立减9元</p>
                        </div>
                        <div class="business-info-promotion-right">
                            <p>2个活动</p>
                            <i class="fa fa-caret-down"></i>
                        </div>
                    </div>
                    <div class="business-info-promotion">
                        <div class="business-info-promotion-left">
                            <div class="business-info-promotion-left-incon" style="background-color: #F1884F;">特</div>
                            <p>特价商品5元起</p>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <img src="img/sj02.png">
                <div class="business-info">
                    <div class="business-info-h">
                        <h3>小锅饭豆腐馆（全运店）</h3>
                        <div class="business-info-like">&#8226;</div>
                    </div>
                    <div class="business-info-star">
                        <div class="business-info-star-left">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <p>4.9 月售345单</p>
                        </div>
                        <div class="business-info-star-right">
                            蜂鸟专送
                        </div>
                    </div>
                    <div class="business-info-delivery">
                        <p>&#165;15起送 | &#165;3配送</p>
                        <p>3.22km | 30分钟</p>
                    </div>
                    <div class="business-info-explain">
                        <div>各种饺子</div>
                    </div>
                    <div class="business-info-promotion">
                        <div class="business-info-promotion-left">
                            <div class="business-info-promotion-left-incon">新</div>
                            <p>饿了么新用户首单立减9元</p>
                        </div>
                        <div class="business-info-promotion-right">
                            <p>2个活动</p>
                            <i class="fa fa-caret-down"></i>
                        </div>
                    </div>
                    <div class="business-info-promotion">
                        <div class="business-info-promotion-left">
                            <div class="business-info-promotion-left-incon">特</div>
                            <p>特价商品5元起</p>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <img src="img/sj03.png">
                <div class="business-info">
                    <div class="business-info-h">
                        <h3>麦当劳麦乐送（全运路店）</h3>
                        <div class="business-info-like">&#8226;</div>
                    </div>
                    <div class="business-info-star">
                        <div class="business-info-star-left">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <p>4.9 月售345单</p>
                        </div>
                        <div class="business-info-star-right">
                            蜂鸟专送
                        </div>
                    </div>
                    <div class="business-info-delivery">
                        <p>&#165;15起送 | &#165;3配送</p>
                        <p>3.22km | 30分钟</p>
                    </div>
                    <div class="business-info-explain">
                        <div>各种饺子</div>
                    </div>
                    <div class="business-info-promotion">
                        <div class="business-info-promotion-left">
                            <div class="business-info-promotion-left-incon">新</div>
                            <p>饿了么新用户首单立减9元</p>
                        </div>
                        <div class="business-info-promotion-right">
                            <p>2个活动</p>
                            <i class="fa fa-caret-down"></i>
                        </div>
                    </div>
                    <div class="business-info-promotion">
                        <div class="business-info-promotion-left">
                            <div class="business-info-promotion-left-incon">特</div>
                            <p>特价商品5元起</p>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <img src="img/sj04.png">
                <div class="business-info">
                    <div class="business-info-h">
                        <h3>米村拌饭（浑南店）</h3>
                        <div class="business-info-like">&#8226;</div>
                    </div>
                    <div class="business-info-star">
                        <div class="business-info-star-left">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <p>4.9 月售345单</p>
                        </div>
                        <div class="business-info-star-right">
                            蜂鸟专送
                        </div>
                    </div>
                    <div class="business-info-delivery">
                        <p>&#165;15起送 | &#165;3配送</p>
                        <p>3.22km | 30分钟</p>
                    </div>
                    <div class="business-info-explain">
                        <div>各种饺子</div>
                    </div>
                    <div class="business-info-promotion">
                        <div class="business-info-promotion-left">
                            <div class="business-info-promotion-left-incon">新</div>
                            <p>饿了么新用户首单立减9元</p>
                        </div>
                        <div class="business-info-promotion-right">
                            <p>2个活动</p>
                            <i class="fa fa-caret-down"></i>
                        </div>
                    </div>
                    <div class="business-info-promotion">
                        <div class="business-info-promotion-left">
                            <div class="business-info-promotion-left-incon">特</div>
                            <p>特价商品5元起</p>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <img src="img/sj05.png">
                <div class="business-info">
                    <div class="business-info-h">
                        <h3>申记串道（中海康城店）</h3>
                        <div class="business-info-like">&#8226;</div>
                    </div>
                    <div class="business-info-star">
                        <div class="business-info-star-left">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <p>4.9 月售345单</p>
                        </div>
                        <div class="business-info-star-right">
                            蜂鸟专送
                        </div>
                    </div>
                    <div class="business-info-delivery">
                        <p>&#165;15起送 | &#165;3配送</p>
                        <p>3.22km | 30分钟</p>
                    </div>
                    <div class="business-info-explain">
                        <div>各种饺子</div>
                    </div>
                    <div class="business-info-promotion">
                        <div class="business-info-promotion-left">
                            <div class="business-info-promotion-left-incon">新</div>
                            <p>饿了么新用户首单立减9元</p>
                        </div>
                        <div class="business-info-promotion-right">
                            <p>2个活动</p>
                            <i class="fa fa-caret-down"></i>
                        </div>
                    </div>
                    <div class="business-info-promotion">
                        <div class="business-info-promotion-left">
                            <div class="business-info-promotion-left-incon">特</div>
                            <p>特价商品5元起</p>
                        </div>
                    </div>
                </div>
            </li>
        </ul>

        <!-- 底部菜单部分 -->
        <ul class="footer">
            <li onclick="location.href='index.html'">
                <i class="fa fa-home"></i>
                <p>首页</p>
            </li>
            <li>
                <i class="fa fa-compass"></i>
                <p>发现</p>
            </li>
            <li onclick="location.href='orderList.html'">
                <i class="fa fa-file-text-o"></i>
                <p>订单</p>
            </li>
            <li>
                <i class="fa fa-user-o" @click="jumpTo('myInfo.html')"></i>
                <p>我的</p>
            </li>
        </ul>
    </div>
    <script>
        var path=getRequestPath()
        var app = new Vue({
            el: "#app",
            data: {
                noticeArr: [
                    { title: '饿了么现推出积分系统！首次下单返总额等比积分点！' },
                    { title: '第2次下单返60%积分点！' },
                    { title: '第3、4次下单返50%积分点！' },
                    { title: '第5次及以后返30%积分点，会员更多返利！' },
                    { title: '每百积分无门槛抵一元现金，快来下单啵~' },
                ],
                number: 0,
                isVIP:false
            },
            mounted() {
                this.scrollMove();
            },
            computed: {
                noticeList() {
                    return {
                        id: this.number,
                        text: this.noticeArr[this.number].title,
                    };
                    timer: null
                },
            },
            methods: {
                checkVIP:function(){
                    
                    axios.post(path+"/SuperMemberController/checkVIPByUserId",null,{
                        params:{
                            
                        },
                        headers:{
                            Authorization:this.getAuthorization()
                        }
                    }).then((respon)=>{
                        if(respon.data.code==200){
                            this.isVIP=respon.data.detail
                        }
                    }).catch((error)=>{
                        console.log(error)
                    })
                },
                getAuthorization:function(){
                    return window.localStorage.getItem("Auth")
                },
                scrollMove() {
                    this.timer = setTimeout(() => {
                        if (this.number === this.noticeArr.length - 1) {
                            this.number = 0;
                        } else {
                            this.number += 1;
                        }
                        
                        this.scrollMove();
                    }, 3000);
                },
                //鼠标进入
                mouseEnter() {
                    clearInterval(this.timer);
                },
                //鼠标离开
                mouseLeave() {
                    this.scrollMove();
                },
                jumpTo: function (u) {
                    window.location.href = u
                }
            },
            created() {
                console.log(window.localStorage.getItem("Auth"))
                this.checkVIP()
            }
        })
    </script>
</body>

</html>